<template>
    <div style="width: 100%; height: 100%;">
      <div style="width: 100%; height: 300px;margin-left: 10px;" ref="mychart" ></div>
    </div>
  </template>
  <script>
  import * as echarts from 'echarts';
  export default {
    //  数据可视化
      props:{
          dataList:[],
          axdata:[],
          title:'',
      },
  
      data(){
          return {
  
              serData:this.dataList,
              option : {
                  tooltip: {
                      trigger: 'item',
                      formatter: function(e) {
                          // params 是一个数组，包含了触发提示框的所有数据项信息
                         
                          var result = e.value + '<br>'; // 假设第一个数据项包含了名称信
                          return result;
                      }
                  },
                 
                      title:{
                          text:'销售额',
                          left:'center',
                          top:'20px',
                          textStyle: {
                              color: '#000',  // 设置标题文字颜色为蓝色
                              fontSize: 14,    // 设置标题文字大小为18px
                              fontWeight: 'bold'  // 设置标题文字加粗
                          }
                      },
                      xAxis: {
                          data: ['1', '2', '3', '4', '5','6','7'],
                          axisLine: {
                              lineStyle: {
                                  color: '#000'  // 设置坐标轴线的颜色为红色
                              }
                          },
                          axisLabel: {
                                color:'#000',// x轴字体颜色
                               
                        },
                      },
                      yAxis: {
                          type: 'value',
                          name: '销售额',
                          axisLine: {
                              lineStyle: {
                                  color: '#000'  // 设置坐标轴线的颜色为红色
                              }
                          },
                          axisLabel: {
                                color:'#000',// x轴字体颜色
                               
                        },
                      },
                      series: [
                          {
                          data: [566,674,564,565,334,553,887],
                          type: 'line',
                          areaStyle: {}
                          }
                      ]
  }
          }
      },
      mounted(){
        this.$nextTick(() => {
                    console.log(this.axdata)
                    this.init(this.dataList,this.axdata)
              
            });
         
      },
      computed:{
        listenChange(){
            const {dataList,axdata} = this
            return {dataList,axdata}
        }
        },
      watch:{
        listenChange(val){
            this.init(val.dataList,val.axdata)
        }
      },
      methods:{
        init(dataList,axdata){
            console.log(axdata)
            var mychart = echarts.init(this.$refs.mychart)
            this.option.title.text = this.title
            this.option.series[0].data = dataList
            this.option.xAxis.data = axdata
            mychart.setOption(this.option)
        }
      }
  }
  </script>
  
  <style lang="less" scoped>
  
  
  </style>
  
  